<template>
  <div class="article-vessel">
    <van-nav-bar
      @click-left="onClickLeft"
      title="歌单"
      left-arrow
      fixed="true"
      to="/Home"
    >
      <template #right title>
        <van-icon class="tu" name="search" size="18" />
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <div class="box">
      <div class="box1">
        <van-row type="flex">
          <div class="box4">
            <img
              src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3622608474,2529804293&fm=26&gp=0.jpg"
            />
            <van-col div="6" class="div1">我喜欢的音乐</van-col>
            <van-col div="6" class="div2">xxxx</van-col>
          </div>
        </van-row>
      </div>
      <div class="box2">
        <van-icon class="to" name="passed" /><span>1<span>|</span></span>
        <van-icon class="to" name="smile-comment-o" /><span
          >评论<span>|</span></span
        >
        <van-icon class="to" name="share-o"
          ><span class="span2">分享</span><van-cell @click="showShare = true"/>
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
        /></van-icon>
      </div>
    </div>
    <div class="div3">
      <van-icon name="play-circle" />播放全部<span class="span5">(394)</span
      ><van-icon name="down" /><van-icon name="certificate" />
    </div>
    <love />
  </div>
</template>

<script>
import love from './components/love'
export default {
  components: {
    love
  },
  data () {
    return {
      show: false, // 控制编辑频道弹出层的显示状态
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ]
    }
  },
  computed: {},
  created () {},
  mounted () {},
  methods: {
    onClickLeft () {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
.content {
  padding: 12px 20px 20px;
}
.tu {
  margin: 15px;
}
.distance {
  width: 100%;
  background: #ffff;
  color: #000;
  border: none;
}
.distance span {
  margin-right: 285px;
  font-weight: bolder;
}
/deep/ .van-card {
  margin-top: 90px;
}
/deep/ .van-card__title {
  margin-top: 20px;
}
/deep/ .van-card__des {
  margin-top: 20px;
}
.box {
  background-color: #fff;
  width: 753px;
  height: 300px;
  margin-top: 100px;
}
.box2 {
  width: 550px;
  height: 80px;
  margin-top: 105px;
  margin-left: 100px;
  background-color: #cfcfcffa;
  border-radius: 40px;
  text-align: center;
  font-size: 12px;
}
.to {
  line-height: 80px;
  font-size: 50px;
}
.box4 {
  margin-left: 40px;
  img {
    width: 150px;
    height: 150px;
  }
}
.div1 {
  margin-top: -150px;
  margin-left: 180px;
  width: 400px;
  height: 150px;
  font-size: 16px;
  color: #000;
}
.div2 {
  padding-top: 20px;
  margin-top: -100px;
  margin-left: 180px;
  width: 300px;
  height: 150px;
  font-size: 12px;
  color: #000;
}
/deep/ .van-row--flex {
  width: 150px;
  height: 150px;
}
/deep/.van-cell {
  background-color: rgba(245, 240, 240, 0.082);
  margin-top: -60px;
  margin-left: 50px;
  width: 1px;
  height: 1px;
}
.span2 {
  font-size: 12px;
}
/deep/ .van-nav-bar__title {
  color: #000;
  font-weight: bolder;
}
/deep/ .van-nav-bar__arrow {
  color: #000;
  font-size: 50px;
}
/deep/ .van-nav-bar__content {
  border: 'none';
}
/deep/ .article-list {
  margin-top: 50px;
}
/deep/.van-icon-search {
  color: #000;
  font-size: 50px;
}
/deep/.van-icon-ellipsis {
  color: #000;
  font-size: 50px;
}
.body {
  background: gray;
}
span {
  padding-left: 20px;
  padding-right: 20px;
}
.div3 {
  margin-top: 70px;
  font-size: 40px;
  font-weight: bolder;
}
.van-icon-play-circle {
  margin-right: 20px;
  vertical-align: middle;
}
.van-icon-certificate {
  vertical-align: middle;
  margin-left: 20px;
}
.van-icon-down {
  vertical-align: middle;
  margin-left: 300px;
}
.span5 {
  font-size: 12px;
  font-weight: normal;
}
</style>
